<template>
  <div class="aside-container">
    <!-- 首部 -->
    <el-header class="side-header">
      <h1 style="text-align: center; color: #64f0fb">
        TMS 物流管理系统 
      </h1>
    </el-header>
    <el-menu
      active-text-color="rgb(245 218 137)"
      class="menu"
      @open="handleOpen"
      @close="handleClose"
      background-color="#3170ae"
      text-color="#fff"
      router
    >
      <!-- 拼接 路由-->
      <!-- 一级路由 -->
      <el-menu-item index="/admin" @click="logout">
        {{ userInfo.username }}  退出登录
      </el-menu-item>
      <el-submenu v-for="(m, index) in menu" :index="index + ''">
        <template slot="title">
          <span slot="title">
            <i :class="m.meta.icon" class="sideIcon"></i>
            {{ m.meta.name }}
          </span>
        </template>
        <!-- 二级路由 -->
        <el-menu-item-group v-for="(childMenu, childIndex) in m.children">
          <!-- 拼接请求地址 -->
          <el-menu-item
            :index="
              '/admin/' + m.path + '/' + childMenu.path + '?time=' + Date.now()
            "
          >
            <i :class="childMenu.meta.icon"></i>
            {{ childMenu.meta.name }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Aside",

  data() {
    return {
      menu: [], // 左侧栏的菜单
    };
  },
  created() {
    // 检查登录状态
    if (!this.$store.getters.adminname) {
      this.$store.dispatch("admin/getInfo");
    }
    // 获取所有路由
    const routes = this.$router.options.routes;
    // 过滤出管理的路由
    const adminRouter = routes.filter((route) => {
      return route.name == "Admin";
    });
    this.menu = adminRouter[0].children;
  },
  mounted() {},
  computed: {
    userInfo() {
      return {
        username: this.$store.getters.username,
      };
    },
  },
  methods: {
    // 切换到后台管理首页
    changeSidebar(flag) {
      this.isCollapse = flag;
      this.changeSidebarHome();
    },
    changeSidebarHome(flag) {
      this.$bus.emit("changeSidebarHome", flag);
    },
    handleOpen() {},
    handleClose() {},
    logout() {
      this.$store.dispatch("admin/logout").then(() => {
        this.$message.success("欢迎下次登录");
        this.$router.replace({ path: "/" });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.aside-container {
  height: 100vh;
  position: fixed;
  width: 200px;
  background-color: #3170ae;
}
.side-header {
  padding: 0;
  border: 2px solid #000000;
  background: #1c3d61;
}
.menu {
  text-shadow: 1px 1px 2px #1f949e;
}
.sideIcon {
  font-size: 1.5em;
  color: #87dceb;
}
</style>